<!-- 聊天语音 -->
<template>
  <div class='chat-yuyin-container'>

    <div :class="fromMe===1?'yuyin-you':'yuyin-zuo'"
         :style="'width:' + currentAudioWidth"
         @click="audioClick">

      <audio preload="auto"
             ref="yuyinAudio"
             @canplay="getDuration"
             @timeupdate="timeupdate"
             @ended="ended"
             hidden="true"
             :src="yuyinSrc">

      </audio>
      <!-- 其他人的 -->
      <template v-if="fromMe === 0">
        <van-icon class="iconfont"
                  style="margin-right:10px"
                  class-prefix="icon-ali"
                  :name="audioPlaying?require('../static/pic/yuyinyou.gif'):require('../static/pic/yuyinyou.png')" />
        <span>{{audioTime+'"'}}</span>
      </template>

      <!-- 我的 -->
      <template v-else>
        <span>{{audioTime+'"'}}</span>
        <van-icon class="iconfont"
                  style="margin-left:10px"
                  class-prefix="icon-ali"
                  :name="audioPlaying?require('../static/pic/yuyinzuo.gif'):require('../static/pic/yuyinzuo.png')" />
      </template>

    </div>
    <!-- 进度条 -->
    <van-progress :percentage="currentPercentage"
                  :show-pivot="false"
                  color="green"
                  stroke-width="2"
                  ref="progress" />

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  props: {
    yuyinSrc: {
      type: String,
      default () {
        return ''
      },
    },
    fromMe: {
      type: Number,
      default () {
        return 0//默认是他人发送
      },
    },

  },
  components: {},
  data () {
    //这里存放数据
    return {
      // 最大录音时长60秒
      audioWidth: 6.3,
      // 默认/当前录音宽度
      currentAudioWidth: '',
      // 当前进度
      currentPercentage: '',
      // 默认没有播放
      audioPlaying: false,
      // 展示的时间
      audioTime: 0,
      // 真正的音频时间
      time: 0,
    }
  },
  //方法集合
  methods: {
    //
    audioClick (e) {
      var audio = this.$refs.yuyinAudio;
      if (audio !== null) {
        //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
        if (audio.paused) {
          audio.play();//audio.play();// 这个就是播放  
          this.audioPlaying = true;
        } else {
          audio.pause();// 这个就是暂停
          this.audioPlaying = false;

        }
      }
    },
    // 缓冲到可以播放获取总时间
    getDuration (e) {
      this.time = e.target.duration;
      this.currentAudioWidth = ((this.time / 60) * this.audioWidth) + 'rem';
      // 重新绘制进度条
      this.$refs.progress.resize();

      //秒
      var seconds = Math.round(this.time);
      this.audioTime = seconds <= 0 ? 1 : seconds;
    },
    //获取audio当前播放时间
    timeupdate (e) {
      var currentTime = e.target.currentTime;
      this.currentPercentage = (currentTime / this.time) * 100;
    },
    // 音频播放结束
    ended (e) {
      this.audioPlaying = false;
      // 进度条重置为0
      this.currentPercentage = '';
    },
  },
  //监听属性 类似于data概念
  computed: {

  },
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  //生命周期 - 创建之前
  beforeCreate () {

  },
  //生命周期 - 挂载之前
  beforeMount () {

  },
  //生命周期 - 更新之前
  beforeUpdate () {

  },
  //生命周期 - 更新之后
  updated () {

  },
  //生命周期 - 销毁之前
  beforeUnmount () {

  },
  //生命周期 - 销毁完成
  unmounted () {

  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated () {

  }
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类

.yuyin-you {
  background-color: rgb(158, 234, 106);
  padding: 8px;
  font-size: 15px;
  min-width: 1.3rem;
  text-align: right;
}
//小三角形
.yuyin-you::after {
  position: absolute;
  right: -8px;
  top: 8px;
  content: "";
  border-left: 10px solid rgb(158, 234, 106);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.yuyin-zuo {
  background-color: rgb(255, 255, 255);
  padding: 8px;
  font-size: 15px;
  min-width: 1.3rem;
  text-align: left;
}
//小三角形
.yuyin-zuo::after {
  position: absolute;
  left: -8px;
  top: 8px;
  content: "";
  border-right: 10px solid rgb(255, 255, 255);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
</style>